"use client";
import React from "react";
import Link from "next/link";
import {
  UnstyledButton,
  useMantineTheme,
  Text,
  Anchor,
  Card,
  Group,
  SimpleGrid,
  Button,
} from "@mantine/core";
import {cards} from "./data";
import classes from "./IpdCrds.module.css";
import {IconInfoSquareRounded} from "@tabler/icons-react";

export function IpdCards() {
  const theme = useMantineTheme();

  const items = cards.map((item) => (
    <UnstyledButton key={item.title} className={classes.item} component={Link} href={item.href}>
      <item.icon color={theme.colors[item.color][6]} size={32} />
      <Text size="xs" mt={7}>
        {item.title}
      </Text>
    </UnstyledButton>
  ));
  return (
    <Card withBorder radius="sm" className={classes.card}>
      <Group justify="space-between">
        <Text fz="sm" fw={500}>
          基础数据
        </Text>
      </Group>
      <SimpleGrid cols={3} mt="md">
        {items}
      </SimpleGrid>
    </Card>
  );
}
